<template>
	<view>
		<!-- <view class="num text-blue size24 flexs2">
			<block v-for="(item, index) in sums" :key="index">
				<view v-if="width < 100 / sums * item && width > 100 / sums * index">{{width}}%</view>
				<view v-else-if="width > 100 / sums * item || (width / sums) == (100 / sums) || width == 100 / sums * item">{{(100 / sums) * (index + 1)}}%</view>
				<view v-else></view>
			</block>
		</view> -->
		<view class="width615 flexs">
			<view class="bg1">
				<view class="bg2" :style="[{'width':width + '%'}]"></view>
			</view>
			<view class="yuans flexs2">
				<image src="../static/yuan.png"></image>
				<block v-for="(item, index) in sums" :key="index">
					<image src="../static/yuan.png" v-if="width > 100 / sums * item || (width / sums) == (100 / sums) || width == 100 / sums * item"></image>
					<view class="width32" v-else>
						<view></view>
					</view>
				</block>
			</view>
		</view>
		<view class="flexs2 p_bot size24 text-gray">
			<view v-for="(item, index) in list" :key="index">{{item}}</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			list:{
				type: Array,
				default:[]
			},
			StepInfo: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				sums: 4,
				width: 0,
			}
		},
		watch:{
			list(val){
				console.log(val)
			},
			StepInfo(val){
				console.log((val.Current / val.Sum).toFixed(2))
				this.width = val.Current
				this.sums = val.Sum - 1
			},
		},
		onLoad() {
			console.log()
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.num{
		width: 600upx;
		margin: 0 auto;
		view{
			width: 20%;
			text-align: center;
		}
	}
	.width615{
		width: 630upx;
		height: 32upx;
		margin: 0 auto;
		position: relative;
		.bg1{
			width: 100%;
			height: 4upx;
			background: #DDDDDD;
			.bg2{
				height: 100%;
				background: #3687F7;
			}
		}
		.yuans{
			position: absolute;
			top: 0;
			left: -2%;
			width: 104%;
			height: 100%;
			image{
				width: 32upx;
				height: 32upx;
				// border: 1upx solid;
			}
			.width32{
				width: 32upx;
				text-align: center;
				display: flex;
				justify-content: center;
				view{
					background: #DDDDDD;
					width: 22upx;
					height: 22upx;
					border-radius: 50%;
				}
			}
		}
		
	}
	.p_bot{
		width: 670upx;
		margin: 15upx auto 0 auto;
	}
	.flexs {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.flexs1 {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.flexs2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.flexs3 {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	
	.btns {
		width: 690upx;
		height: 90upx;
		border-radius: 45upx;
		background: #3687F7;
		font-size: 30upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 90upx;
	}
	.btns2 {
		width: 690upx;
		height: 80upx;
		border-radius: 8upx;
		background: #3687F7;
		color: #FFFFFF;
		text-align: center;
		line-height: 80upx;
	}
	.size24{
		font-size: 24upx;
	}
	.size26{
		font-size: 26upx;
	}
	.size30{
		font-size: 30upx;
	}
	.size32{
		font-size: 32upx;
	}
	.size20{
		font-size: 20upx;
	}
	.text-gray{
		color: #000000;
	}
	.text-grey{
		color: #666666;
	}
	.text-blue{
		color: #8bcbaf;
	}
	.cuIcon-back{
		font-size: 40upx;
	}
</style>
